<template>
    <section style="overflow-y: auto;" :style="{height: height+'px'}">
        <div style="width: 1100px;height: 40px;margin-left:40px;border-bottom: 1px solid #dcdfe6;" v-if="isPreview!=1">
            <div style="float: right;">
                <el-button :type="(ruleData.process_sheet_status == 1 ?'danger':'warning')" plain size="small"
                    @click="lockBtn" :loading="lockLoading">
                    {{ruleData.process_sheet_status == 1 ? "解锁":"锁定"}}
                </el-button>
                <el-button type="primary" v-print="'#printGy'" plain size="small" @mouseenter.native="mouseEnterBtn"
                           @mouseleave.native="mouseLeaveBtn">打印</el-button>
            </div>
        </div>
        <el-row id="printGy">
            <div :style="{'min-height': printHeight, 'margin-bottom': divMarginBottom}">
                <el-row style="text-align: center;padding-bottom: 16px;">
                    <img style="width: 30px; height: 30px; margin-right: 10px;vertical-align: middle;" :src="logossy2"/>
                    <span style="font-size: 25px;font-weight: 800;">大货产品制作标准指导书</span>
                </el-row>
                <el-row>
                    <span style="float: right">更新时间：{{(gyData.updatetime) || "--" }}</span>
                    <table style="width: 100%;font-size: 16px;" border>
                        <tr style="text-align: center">
                            <td style="width: 150px;" rowspan="2">
                                <el-image v-if="ruleData.wear_image && ruleData.wear_image[0]"
                                          :src="ruleData.wear_image[0]" :preview-src-list="ruleData.wear_image" fit="contain"></el-image>
                            </td>
                            <td colspan="3">款号：{{ruleData.type_no}}</td>
                            <td colspan="3">款名：{{ruleData.type_name}}</td>
                        </tr>
                        <tr style="text-align: center">
                            <td>{{ gyData.is_gif == 1 ? "赠品" : "非赠品" }}</td>
                            <td>{{ gyData.is_perform == 1 ? "演出服" : "非演出服" }}</td>
                            <td>{{ gyData.is_shuixi == 1 ? "水洗产品" : "非水洗产品" }}</td>
                            <td>工艺师：{{ gyData.add_user || "--" }}</td>
                            <td>执行标准：{{gyData.executive_standard || "--"}}</td>
                            <td>安全类别：{{gyData.safety_category || "--"}}</td>
                        </tr>
                        <tr>
                            <td rowspan="2" style="font-weight: bold;text-align: center;">生产缝制工艺要求</td>
                            <td colspan="6">
                                <span style="font-weight: bold">用针型号针距缝份:</span>
                                {{(gyData.production_sewing_process_requirements && gyData.production_sewing_process_requirements.stitch) || "--"}}
                            </td>
                        </tr>
                        <tr>
                            <td colspan="6">
                                <span style="font-weight: bold;text-align: center;">粘衬部位:</span>
                                {{(gyData.production_sewing_process_requirements && gyData.production_sewing_process_requirements.lining) || "--" }}
                            </td>
                        </tr>
                        <tr>
                            <td rowspan="2" style="font-weight: bold;text-align: center;">唛头位置</td>
                            <td colspan="6">
                                <div v-if="gyData.mark_position">
                                    <span style="font-weight: bold">{{gyData.mark_position.type == 5 ?"常规腰" : "主唛"}}：</span>
                                    {{gyData.mark_position.main}}
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="6">
                                <div v-if="gyData.mark_position">
                                    <span style="font-weight: bold">{{gyData.mark_position.type == 5 ? "牛筋腰" : "洗唛" }}：</span>
                                    {{gyData.mark_position.second}}
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td style="font-weight: bold;text-align: center;">锁定要求</td>
                            <td colspan="6">
                                <div v-for="(item, index) in gyData.requirements_for_locking_nails" :key="index" style="margin-bottom: 5px">
                                    要求{{ index + 1 }}：{{ item.title }}
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td style="font-weight: bold;text-align: center;">特殊工艺要求</td>
                            <td colspan="6">
                                <div v-for="(item, index) in gyData.special_process_requirements" :key="index" style="margin-bottom: 5px">
                                    要求{{ index + 1 }}：{{ item.title }}
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td style="font-weight: bold;text-align: center;">包装规格要求</td>
                            <td colspan="6">
                                <div v-for="(item, index) in gyData.packaging_specification_requirements" :key="index" style="margin-bottom: 5px">
                                    要求{{ index + 1 }}：{{ item.title }}
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td style="font-weight: bold;text-align: center;">裁剪要求</td>
                            <td colspan="6">
                                <p v-html="replaceN(gyData.cutting_requirements)"></p>
                            </td>
                        </tr>
                        <tr>
                            <td style="font-weight: bold;text-align: center;">后道工序</td>
                            <td colspan="6">
                                <p v-html="replaceN(gyData.subsequent_process)"></p>
                            </td>
                        </tr>
                        <tr>
                            <td style="font-weight: bold;text-align: center;">验收标准</td>
                            <td colspan="6">
                                <p v-html="replaceN(gyData.acceptance_criteria)"></p>
                            </td>
                        </tr>
                    </table>
                </el-row>
            </div>
            <!--工艺指示书-->
            <div v-for="(item, index) in gyData.process_instruction" :key="index" :style="{'min-height': printHeight, 'margin-bottom': divMarginBottom}">
                <el-row style="text-align: center;margin-bottom: 16px;">
                    <img style="width: 30px; height: 30px; margin-right: 10px;vertical-align: middle;" :src="logossy2"/>
                    <span style="font-size: 25px;font-weight: 800;">大货产品制作标准指导书</span>
                </el-row>
                <el-row>
                    <table style="width: 100%;font-size: 16px;" border>
                        <tr>
                            <td style="padding: 0;">
                                <img :src="item.img" height="300px" alt="" />
                                <span class="circle" style="position: absolute;" v-for="(e, idx) in item.labels" :key="idx" :style="{ top: e.y + 'px', left: e.x + 'px' }" @click.stop>
                                    {{ idx + 1 }}
                                </span>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div style="margin-bottom: 10px">图片名称：{{ item.title }}</div>
                                <div v-for="(e, idx) in item.labels" :key="idx" style="margin-bottom: 6px;">
                                    <span class="circle">{{ idx + 1 }}</span>
                                    <span style="display: inline-block;vertical-align: top;width: 97%;" v-html="e.content"></span>
                                </div>
                            </td>
                        </tr>
                    </table>
                </el-row>
            </div>
            <!--工艺细节图-->
            <div :style="{'min-height': printHeight, 'margin-bottom': divMarginBottom}">
                <el-row style="text-align: center;padding-bottom: 16px;">
                    <img style="width: 30px; height: 30px; margin-right: 10px;vertical-align: middle;" :src="logossy2"/>
                    <span style="font-size: 25px;font-weight: 800;">大货产品制作标准指导书</span>
                </el-row>
                <el-row>
                    <table style="width: 100%;font-size: 16px;" border>
                        <tr>
                            <td style="text-align: center;font-weight: bold;width: 100px;">工艺细节图</td>
                            <td>
                                <el-image v-for="(item, index) in gyData.detail_drawing" :key="index" :src="item.url" style="height: 250px"
                                    :preview-src-list="gyData.detail_drawing.map(item => item.url)" fit="fill" :initial-index="currentImageIndex"
                                          @click="currentImageIndex = index"></el-image>
                            </td>
                        </tr>
                    </table>
                </el-row>
            </div>
            <!--可撕标图示-->
            <div>
                <el-row style="text-align: center;padding-bottom: 16px;">
                    <img style="width: 30px; height: 30px; margin-right: 10px;vertical-align: middle;" :src="logossy2"/>
                    <span style="font-size: 25px;font-weight: 800;">大货产品制作标准指导书</span>
                </el-row>
                <el-row>
                    <table style="width: 100%;font-size: 16px;" border>
                        <tr>
                            <td style="text-align: center;font-weight: bold;width: 100px;">可撕标图示</td>
                            <td>
                                <el-image style="height: 200px" v-if="gyData.tearable_label_img" :preview-src-list="[gyData.tearable_label_img]"
                                    :src="gyData.tearable_label_img" fit="contain"></el-image>
                            </td>
                        </tr>
                    </table>
                </el-row>
            </div>
        </el-row>
    </section>
</template>

<script>
import {designDetailLock} from "@/api/bs/design";
import logossy2 from "@/assets/images/logossy2.png";

export default {
    name: "designGy",
    props: {
        gyData:{
            type: Object,
            default: {}
        },
        ruleData: {
            type: Object,
            default: {}
        },
        height: {
            type: Number,
            default: 0
        },
        isPreview:{
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            logossy2,
            selectIndex: 0,
            btnLoading: false,
            loading: false,
            lockLoading: false,
            user: {},
            nodeActions: [],

            currentImageIndex: 0,
            previewVisible: false, // 控制预览窗口的显示与隐藏

            printHeight: "0mm",
            divMarginBottom: "60px"
        }
    },
    created() {
        this.user = this.$store.getters.user;
        this.nodeActions = this.user.node_actions[this.$route.meta.id] ? this.user.node_actions[this.$route.meta.id] : [];
    },
    watch:{

    },
    methods: {
        mouseEnterBtn(){
            this.printHeight = "450mm";
            this.divMarginBottom = "0";
        },
        mouseLeaveBtn(){
            this.printHeight = "0mm";
            this.divMarginBottom = "60px";
        },
        replaceN(content) {
            return content ? content.replace(/\n/g, "<br>") : content;
        },
        lockBtn(){
            let {id, type_no, process_sheet_status} = this.ruleData;
            let status = process_sheet_status == 1 ? 0 : 1;
            let label = process_sheet_status == 1 ? "解锁" : "锁定";
            let obj = {
                id: id,
                type_no: type_no,
                type: 6,
                status: status,
            };
            this.$confirm("确定"+label, '提示',{
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.lockLoading = true;
                designDetailLock(obj).then((res)=>{
                    this.lockLoading = false;
                    if(res.code === 0){
                        this.$message.success(label+"成功");
                        this.$set(this.ruleData, 'process_sheet_status', status);
                    }else{
                        this.$message.error(res.msg);
                    }
                }).catch(()=>{
                    this.lockLoading = false;
                })
            }).catch(() => {

            });
        },
    },
    mounted() {

    }
}
</script>

<style scoped>
@page {
    size: auto;
    margin: 0mm;
}
#printGy{
    width:1100px;
    margin-top: 30px;
    margin-left: 40px;
}
table, th, td {
    border: 1px solid #909399;
    border-collapse: collapse; /* 移除单元格之间的间隔 */
    padding: 6px;
}

.circle{
    margin-right: 4px;
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    border: 1px solid red;
    border-radius: 10px;
    text-align: center;
    color: white;
    background-color: red;
}

.el-image /deep/ .el-icon-circle-close:before{
    color: white;
}
</style>
